<template>
  <div class="purchase-return-page">
    <!-- 搜索条件区域 -->
    <div class="search-conditions">
      <el-card shadow="never" class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <!-- 搜索输入框 -->
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入单据号或供应商或备注"
              clearable
              class="keyword-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 日期范围 -->
          <el-form-item label="日期:">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="2025-06-01"
              end-placeholder="2025-06-27"
              value-format="YYYY-MM-DD"
              class="date-range-picker"
            />
          </el-form-item>

          <!-- 退款状态 -->
          <el-form-item label="退款状态:">
            <el-select
              v-model="searchForm.refundStatus"
              placeholder="请选择"
              clearable
              class="status-select"
            >
              <el-option label="全部" value="" />
              <el-option label="未退款" value="unrefunded" />
              <el-option label="已退款" value="refunded" />
            </el-select>
          </el-form-item>

          <!-- 审核状态 -->
          <el-form-item label="审核状态:">
            <el-select
              v-model="searchForm.auditStatus"
              placeholder="空"
              clearable
              class="status-select"
            >
              <el-option label="全部" value="" />
              <el-option label="待审核" value="pending" />
              <el-option label="已审核" value="approved" />
            </el-select>
          </el-form-item>

          <!-- 仓库 -->
          <el-form-item label="仓库:">
            <el-input
              v-model="searchForm.warehouse"
              placeholder="请输入"
              clearable
              class="warehouse-input"
            />
          </el-form-item>

          <!-- 商品 -->
          <el-form-item label="商品:">
            <el-input
              v-model="searchForm.product"
              placeholder="请输入"
              clearable
              class="product-input"
            />
          </el-form-item>

          <!-- 操作按钮 -->
          <el-form-item class="form-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleAdvancedSearch">高级搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格操作按钮 -->
    <div class="table-actions">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleAudit">审核</el-button>
      <el-button @click="handlePrint">打印</el-button>
      <el-button @click="handleImport">导入</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="operation" label="操作" width="80" align="center">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="单据日期" width="120" align="center" />
        <el-table-column prop="orderNo" label="单据编号" width="180" align="center" />
        <el-table-column prop="supplier" label="供应商" width="220" align="center" />
        <el-table-column prop="supplierType" label="供应商类别" width="120" align="center" />
        <el-table-column prop="salesman" label="业务员" width="100" align="center" />
        <el-table-column prop="relatedOrderNo" label="关联购货订单号" width="180" align="center" />
        <el-table-column prop="sourceOrderNo" label="源购货单号" width="180" align="center" />
        <el-table-column prop="sourceQuantity" label="源购货单数量" width="120" align="right" />
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        <el-table-column prop="purchaseAmount" label="购货金额" width="120" align="right">
          <template #default="{row}">
            <span class="red-text">{{ formatCurrency(row.purchaseAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额" width="120" align="right">
          <template #default="{row}">
            <span class="red-text">{{ formatCurrency(row.discountAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="finalAmount" label="优惠后金额" width="120" align="right">
          <template #default="{row}">
            <span class="red-text">{{ formatCurrency(row.finalAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taxAmount" label="税额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.taxAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="settlementAccount" label="结算账户" width="120" align="center" />
        <el-table-column prop="refundedAmount" label="已退款" width="120" align="right">
          <template #default="{row}">
            <span class="red-text">{{ formatCurrency(row.refundedAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="refundStatus" label="退款状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.refundStatus === 'refunded' ? 'success' : 'warning'">
              {{ row.refundStatus === 'refunded' ? '已退款' : '未退款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reconciliationStatus" label="对单状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.reconciliationStatus === 'reconciled' ? 'success' : 'info'">
              {{ row.reconciliationStatus === 'reconciled' ? '已对单' : '未对单' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="制单人" width="100" align="center" />
        <el-table-column prop="createTime" label="制单时间" width="180" align="center" />
        <el-table-column prop="purchaseFee" label="采购费用" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.purchaseFee) }}
          </template>
        </el-table-column>
        <el-table-column prop="auditor" label="审核人" width="100" align="center" />
        <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip />
        <el-table-column prop="deliveryMethod" label="交货方式" width="120" align="center" />
        <el-table-column prop="logisticsNo" label="关联物流单号" width="180" align="center" />
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
      />
      <span class="page-info">共{{ Math.ceil(pagination.total/pagination.pageSize) }}页</span>
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'PurchaseReturnOrder',
  components: { Search },
  data() {
    return {
      searchForm: {
        keyword: '',
        dateRange: ['2025-06-01', '2025-06-27'],
        refundStatus: '',
        auditStatus: '',
        warehouse: '',
        product: ''
      },
      tableData: [
        {
          orderDate: '2025-06-27',
          orderNo: 'GHT20250627001',
          supplier: 'G00003广州食品批发有限公司',
          supplierType: '食品供应商',
          salesman: '',
          relatedOrderNo: 'GHDD20250606001',
          sourceOrderNo: 'CG20250627001',
          sourceQuantity: 100,
          quantity: 1,
          purchaseAmount: 100.00,
          discountAmount: 0.00,
          finalAmount: 100.00,
          taxAmount: 10.00,
          settlementAccount: '中国银行',
          refundedAmount: 0.00,
          refundStatus: 'unrefunded',
          reconciliationStatus: 'unreconciled',
          creator: '系统管理员',
          createTime: '2025-06-27 15:30:22',
          purchaseFee: 5.00,
          auditor: '',
          remark: '质量问题退货',
          deliveryMethod: '物流退回',
          logisticsNo: 'WL20250627001'
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 1
      },
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      console.log('执行查询:', this.searchForm)
      this.pagination.currentPage = 1
      this.fetchData()
    },
    handleAdvancedSearch() {
      console.log('打开高级搜索')
    },
    handleAdd() {
      console.log('新增退货单')
    },
    handleEdit(row) {
      console.log('编辑退货单:', row)
    },
    handleAudit() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要审核的记录')
        return
      }
      console.log('审核退货单:', this.selectedRows)
    },
    handlePrint() {
      console.log('打印退货单')
    },
    handleImport() {
      console.log('导入退货单')
    },
    handleDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      console.log('删除退货单:', this.selectedRows)
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handlePageChange(page) {
      this.pagination.currentPage = page
      this.fetchData()
    },
    fetchData() {
      // 这里调用API获取数据
      console.log('获取第', this.pagination.currentPage, '页数据')
    },
    formatCurrency(value) {
      return '¥' + value.toFixed(2)
    }
  }
}
</script>

<style scoped>
.purchase-return-page {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card {
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.el-form-item {
  margin-bottom: 0;
}

.keyword-input {
  width: 280px;
}

.date-range-picker {
  width: 280px;
}

.status-select,
.warehouse-input,
.product-input {
  width: 120px;
}

.form-buttons {
  margin-left: auto;
}

.table-actions {
  margin-bottom: 15px;
}

.data-table {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-info {
  margin-left: 15px;
  color: #606266;
}

/* 红色文本样式 */
.red-text {
  color: #f56c6c;
}

/* 调整Element UI默认样式 */
:deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-form-item__label) {
  padding-right: 5px;
  color: #606266;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-table {
  font-size: 14px;
}

.el-table--border {
  border: 1px solid #ebeef5;
}

.el-table--border ::v-deep .el-table__cell {
  border-right: 1px solid #ebeef5;
}
</style>